<template>
    <div class="login-bg">
        <el-card class="box-card" @keydown.native.enter="handleLogin">
            <el-row style="height: 100%">
                <el-col :span="10">
                    <div class="login-bg-left">
                        <div class="glass"></div>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="login-bg-right">
                        <div class="login-title">登 录</div>
                        <el-form :label-position="labelPosition" label-width="80px" :model="user">
                            <el-form-item>
                                <el-input v-model="user.loginName" placeholder="账号" @focus="handleFocus(false)"
                                          suffix-icon="el-icon-user"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="user.password" placeholder="密码" type="password"
                                          suffix-icon="el-icon-view" @focus="handleFocus(false)"
                                ></el-input>
                            </el-form-item>
                            <span class="login-tips" v-if="loginTips">
                                <i class="el-icon-error" style="font-size: 14px"></i>
                                {{tips}}
                            </span>
                            <el-checkbox v-model="user.rememberMe">记住我</el-checkbox>
                            <el-form-item>
                                <el-button type="info" plain round style="width: 45%" @click="handleLogin"
                                           :loading="loading">立即登录
                                </el-button>
                                <div class="forget-pwd">忘记密码?</div>
                            </el-form-item>
                            <el-form-item style="height: 50px;">
                                <el-divider>© Ostrich_Hu</el-divider>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                labelPosition: 'top',
                loginTips: false,
                tips: '账号或密码不能为空',
                beforeLoginTips: false,
                loading: false,
                showPwdSuffix: true,
                user: {
                    loginName: '',
                    password: '',
                    rememberMe: true
                }
            };
        },
        methods: {
            handleLogin() {
                if (this.user.loginName.trim() && this.user.password.trim()) {
                    this.$httpGet(this.$axiosBaseHttp, "api/rest/sys/login", this.user).then(res => {
                        this.loading = false;
                        if (res.code === 200) {
                            sessionStorage.setItem("currLoginUser", JSON.stringify({
                                id: res.data.id,
                                loginName: res.data.loginName,
                                name: res.data.name,
                                roleName: res.data.roleName,
                                header: this.$commonUrlHttp + "api/rest/file/download/" + res.data.header,
                                sex: res.data.sex,
                                signName: res.data.signName,
                                email: res.data.email,
                            }));
                            this.$router.push({path: "/index/main"});
                        } else {
                            this.loginTips = true;
                            this.tips = res.msg;
                        }
                    });
                } else {
                    this.loginTips = true;
                }
            },
            handleFocus(param, $event) {
                this.loginTips = param;
            }
        },
        mounted() {
            //验证是否记住密码
            // this.$httpGet(this.$axiosBaseHttp, "api/rest/sys/", {}).then(res => {
            //     if (res.code === 200) {
            //         sessionStorage.setItem("currLoginUser", JSON.stringify({
            //             id: res.data.id,
            //             loginName: res.data.loginName,
            //             name: res.data.name,
            //             roleName: res.data.roleName,
            //             header: this.$commonUrlHttp + "api/rest/file/download/" + res.data.header,
            //             sex: res.data.sex,
            //             signName: res.data.signName,
            //             token: ""
            //         }));
            //         this.$router.push({path: "/index/main"});
            //     }
            // });
        }
    }
</script>

<style scoped lang="scss">

    .login-bg {
        overflow: hidden;
        height: calc(100vh);
        /*background-image: linear-gradient(160deg, rgba(0, 0, 0, 0.13) 20%, rgba(0, 179, 255, 0.67) 80%);*/

        .el-card {
            margin: 200px auto;
            height: 500px;
            width: 900px;
            border-radius: 0px;
            border: 0px solid #EBEEF5;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);

            /deep/ .el-card__body {
                padding: 0px;
                height: inherit;
            }
        }

        .el-col {
            height: 100%;

            .login-bg-left {
                height: 100%;
                background: url('../../../assets/img/bg-l.jpg') center top no-repeat;
                background-size: cover;

                .glass {
                    height: 100%;
                    background: rgba(0, 0, 0, 0.25);
                }
            }

            .login-bg-right {
                height: 100%;
                padding: 15% 50px 10% 50px;
                /*background: url('../../../assets/img/bg.jpg') center top no-repeat;*/
                /*background-size: cover;*/
                .login-title {
                    font-size: 26px;
                    font-family: sans-serif;
                    margin-bottom: 15px;
                    font-weight: 600;
                }

                /deep/ .el-checkbox__label {
                    color: #909399;
                }

                /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
                .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                    background-color: #808080;
                    border-color: #808080;
                }

                /deep/ .el-checkbox__inner:hover {
                    border-color: #808080;
                }

                .forget-pwd {
                    color: gray;
                    padding-right: 50px;
                    display: inline-block;
                    text-align: right;
                    width: 55%;
                }

                /deep/ .el-input__inner:focus {
                    border-color: #3c4044;
                }

                /deep/ .el-input__inner {
                    /* -webkit-appearance: none; */
                    /* background-color: #FFF; */
                    /* background-image: none; */
                    border-radius: 0px;
                    border-bottom: 1px solid #dcdfe6f0;
                    border-top: 1px transparent;
                    border-left: 1px transparent;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border-right: 1px transparent;
                }

                .login-tips {
                    padding-left: 10px;
                    color: #cb090d;
                    font-size: 12px;
                }

                /deep/ .el-form-item {
                    margin-bottom: 15px;

                    /deep/ .el-form-item__content {
                        margin: 15px 0;
                    }
                }
            }
        }
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }
</style>
